<script setup>
import {onMounted, ref, reactive} from 'vue';

const emit = defineEmits(['close']);
// 定义 props
const props = defineProps({
  text: {
    type: String,
    required: true
  },
  keyWord: {
    type: String,
    required: false
  }
});
let readText = ref("")

onMounted(() => {
  readText.value = props.text.replaceAll(/\n/g, "<br/>");

  if(props.keyWord){
    let highlight = props.keyWord.replace("*", "");
    readText.value = readText.value.replaceAll( highlight, "<span style=\"background-color: yellow;\">"+highlight+"</span>")
  }


})
</script>

<template>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card" style="width: 1000px">
      <header class="modal-card-head" style="padding: 5px !important;">
        <p class="modal-card-title">详细信息</p>
        <button class="delete" aria-label="close" @click="emit('close');"></button>
      </header>
      <section class="modal-card-body">
        <article class="notification content" >
          <div v-html="readText"></div>
        </article>
      </section>
    </div>
  </div>
</template>

<style scoped>

</style>